<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Content</title>
    <link rel="stylesheet" href="../statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="../statics/HTMLCSS/novalContent.css">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>


<body background="../statics/Photo/雪地.jpg" style="background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            width:100%;">
    <h1 style="margin-left: 800px;position: absolute;top:30px;font-weight: bold;font-family: fantasy;">Welcome to your
        write life📕</h1>
    <div id="container" style="width:100%;">
        <div id="top">
            <button type="button" onclick="logout()" id="logout">Logout</button>
        </div>
        <div id="left">
            <div id="personalData">
                <div class="card-header"
                    style="font-family: fantasy; font-size: 25px;margin-left: 28px; float: left;margin-bottom: 5px;border: solid 2px black;border-radius: 8px;">
                    Personal Data
                </div>
                <p style="font-family: fantasy;"></p>

                <!-- 头像 -->
                <img src="../statics/Photo/p.png" alt="" style="margin-left: 20px;margin-top: 0px;">
                <p></p>
                <!-- 昵称 -->
                <p
                    style="font-family: fantasy;font-size: 20px;margin-left: 40px;border: solid 2px black;border-radius: 8px;width: 160px;text-align: center;">
                    User:&nbsp;&nbsp;&nbsp;&nbsp;{{username}}</p>
                <!-- 虚线 -->
                <hr style="border:1px dashed #000" />

                <p></p>
                <li id="friends" style="border: solid 2px black;border-radius: 5px;display: inline;">加好友</li>
                <li id="addNews" style="border: solid 2px black;border-radius: 5px;display: inline;">加关注</li>
                <p></p>
                <li id="sendPaper" style="border: solid 2px black;border-radius: 5px;display: inline;">发纸条</li>
                <li id="writeTalk" style="border: solid 2px black;border-radius: 5px;display: inline;">写留言</li>
                <p></p>

                <hr style="border:1px dashed #000" />

                &nbsp;&nbsp;<span
                    style="font-family:fantasy;">Level:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span style="font-family: fantasy;font-size: larger ;">130</span><br>
                <br>

                &nbsp;&nbsp;&nbsp;<span style="font-family:fantasy;">P&nbsp;&nbsp;V:</span>
                <span
                    style="font-family: fantasy;font-size: larger ;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4,546,231,742</span><br>
                <br>

                &nbsp;<span style="font-family:fantasy;">Attention:</span>
                <span style="font-family: fantasy;font-size: larger ;">&nbsp;&nbsp;&nbsp;945,213</span><br>
                <br>

                &nbsp;<span style="font-family:fantasy;">Gold Icon:</span>
                <span style="font-family:fantasy;">&nbsp;&nbsp;&nbsp;&nbsp;133,785</span><br>
                <br>

                &nbsp;&nbsp;<span style="font-family:fantasy;">Medal:</span>
                <span style="font-family:fantasy;">&nbsp;&nbsp;&nbsp;&nbsp;</span>

            </div>
        </div>
        <div id="right">

            <div class="card-header"
                style="font-family: fantasy; font-size: 25px;margin-top: 15px; float: left;margin-bottom: 5px;border: solid 2px black;border-radius: 8px;width: 460px;">
                Just Saying
            </div>
            <!-- //Talk Content -->

            <div id="rightContent"
                style="position:absolute; height:520px;width: 480px;margin-top: 85px; overflow:auto;opacity: 1;">
                <div id="list" style="width: 440px;">
                    <ul>

                    </ul>
                </div>
            </div>
        </div>
        <div class="alert alert-danger alert-dismissible fade show invisible text-center"
            style="width: 14rem;top: 2rem; background-color:white;" role="alert">
            <strong>Tips：</strong><label for="" id="msg">QAQ</label>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div id="bottomText">
            <!-- <form id="content" action="/" method="POST"> -->
            <input type="text" placeholder="Please（input text）" id="input" name="input"
                style="width: 325px;height: 40px;position: absolute;top: 710px;left: 420px; border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;margin-left: 490px;">
            <button type="button" onclick="Post()" name="post"
                style="opacity: 0.7;height: 40px;background-color:lime;font-weight: bold;position: absolute;top: 710px;left: 400px; border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;margin-left: 850px;">Post
                Talking</button>
            <!-- </form> -->
        </div>
    </div>
    </div>
    <script src="../statics/js/jquery-3.6.0.min.js"></script>
    <script src="../statics/js/bootstrap.min.js"></script>

    <script>
        let currentMsgId = '';
        function Post() {
            // var input = document.getElementById('input');
            var ul = document.querySelector('#list ul');
            var getTime = new Date();
            var YY = getTime.getFullYear();
            var MM = getTime.getMonth() + 1;
            var DD = getTime.getDate();
            var hh = getTime.getHours();
            var mm = getTime.getMinutes();
            var ss = getTime.getSeconds();
            var day = getTime.getDay();
            let data = {
                input: $('#input').val()
            }
            $.ajax({
                url: "/post",
                type: "POST",
                dataType: "json",
                data: data,
                success: function (res) {
                    if (res.code === 200) {
                        let data = JSON.parse(res.data);
                        console.log(data);
                        if (input.value) {
                            var time = "发表时间：" + YY + "年" + MM + "月" + DD + "号" + hh + "时" + mm + "分" + ss + "秒";
                            var val = input.value;
                            input.value = '';
                            var oli = document.createElement('p');
                            var commentHtml = `
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">吐槽一下</button>
                            <div class="modal show" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <input type="text" class="form-control" aria-describedby="passwordHelpInline"
                                id="commentText">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="saveComment()">发送</button>
      </div>
    </div>
  </div>
</div>
                            `
                            oli.innerHTML = "发表内容：" + val + "<br>" + "<br>" + time + commentHtml
                            ul.insertBefore(oli, ul.firstChild);
                            alert('发布成功！');
                            console.log("发布成功！");
                        } else {
                            alert('请输入内容！');
                        }
                    }
                },
                error: function (msg) {
                    console.log('网络错误！');
                }
            })

        }
        function saveComment() {

        }

        function logout() {
            $.ajax({
                url: "/logout",
                type: "POST",
                dataType: "json",
                success: function (res) {
                    if (res.code === 200) {
                        window.location.href = '/login'
                    }
                },
                error: function (msg) {
                    console.log('网络错误！');
                }
            })
        }
    </script>

    <!-- <script>
        function Post() {
            let input = $('#input').val();
            if (input !== '') {
                $.ajax({
                    url: "/content",
                    type: "POST",
                    data: $('#content').serialize(),
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 200 && input !== '') {
                            alert('发布成功！');
                            // window.location.href = '/';
                        }
                        else {
                            alert('请输入内容！');
                        }
                    },
                    error: function (res) {
                        alert_fn('网络错误！')
                    }
                })

                // 这个方法包装了alert的相关行为和显示的内容
                function alert_fn(msg) {
                    msg = msg || '密码不能为空，两次密码应该一致';
                    // 替换提示的内容
                    $('#msg').text(msg);
                    // 移除不显示的class，则alert将显示
                    $('.invisible').removeClass('invisible');
                    // 5秒中后，给alert增加不显示的class，则alert重新隐藏
                    setTimeout(() => {
                        $('.alert').addClass('invisible');
                    }, 5000);
                }
            }
        }

    </script> -->
</body>

</html>